<template>
  <div  class="search">
    <el-card class="search-view">
      <template #header>
        <h4>关键词搜索</h4>
      </template>
       <!--线图-->
      <div class="search-wrap">
        <div class="search-wrap-chart">
          <div class="title">搜索用户数</div>
          <div class="number">224,566.33</div>
          <v-chart class="line-chart" :option="getLineOption('userList','搜索用户数')" autoresize></v-chart>
        </div>
        <div class="search-wrap-chart">
          <div class="title">搜索量</div>
          <div class="number">224,566.33</div>
          <v-chart class="line-chart" :option="getLineOption('countList','搜索量')" autoresize></v-chart>
        </div>
      </div>
      <!-- 表格-->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="排名" type="index" width="100"/>
        <el-table-column prop="word" label="关键字" />
        <el-table-column prop="count" label="搜索数量" />
        <el-table-column prop="user" label="搜索用户数" />
        <el-table-column prop="range" label="搜索占比" />
      </el-table>
       <!--分页-->
      <el-pagination  v-model:current-page="currentPage" :page-size="pageSize"  layout="prev, pager, next" :total="tableTotalData.length" />
    </el-card>
    <el-card class="search-view">
      <template #header>
        <h4>分类销售排行</h4>
        <el-radio-group v-model="radio1" size="small">
          <el-radio-button label="品类" />
          <el-radio-button label="商品" />
        </el-radio-group>
      </template>
      <div class="search-pie">
        <v-chart class="pie-chart" :option="getPieOption()" autoresize></v-chart>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "index"
};
</script>
<script lang="ts" setup>
import { computed, ref } from "vue";
import {useReportStore} from "@/stores/reportData";
import useFormat from '@/hooks/useFormat'
const {numberFormat, moneyFormat} = useFormat()
const reportDataStore = useReportStore()
const radio1 = ref('品类')
const currentPage = ref(1);
const pageSize = ref(5);
// 1.准备数据
const searchWord = computed(()=> reportDataStore.reportData.searchWord)
// 4.准备折线图的数据列表
const lineChartData = computed(()=>{
  const data = {
    wordList:[] as string[],
    userList:[] as number[],
    countList:[] as number[],
    totalUsers:0,
    totalCounts:0
  }
  if(tableTotalData.value && tableTotalData.value.length>0){
    tableTotalData.value.forEach(item =>{
      data.wordList.push(item.name);
      data.userList.push(item.user);
      data.countList.push(item.count);
      data.totalUsers += item.user;
      data.totalCounts += item.count
    })
  }
  return data
})
//2.处理数据，列表数据渲染有五个数据，
const tableTotalData = computed(()=>{
  if(!searchWord.value) return []
  return searchWord.value.map((item,index)=>{
    return{
      ...item,
      rankNo:index+1,
      range:((item.user/item.count)*100).toFixed(2)+'%' // Number 四舍五入为指定小数位数的数字。
    }
  })
})
//3.真正渲染在表格中的数据
const tableData =computed(()=>{
  // 默认的时候显示第一页，显示5条0-5条数据
  // 第二页 ，显示5条，5-10条
  return tableTotalData.value?.slice((currentPage.value-1) * pageSize.value,currentPage.value*pageSize.value)
})
// 5.左侧折线图数据图表
const getLineOption =(listName:'userList'|'countList',name:string)=>{
  // 包含两组数据 搜索用户数和搜索量
  return{
    xAxis:{
      data:lineChartData.value.wordList
    },
    yAxis:{
      show:false
    },
    series:{
      name,
      type:'line',
      data:lineChartData.value[listName],
      smooth:true,
      itemStyle:{
        opacity:0
      },
      areaStyle:{
        color: '#C7E7FF'
      },
    },
    grid:{
      left:0,
      right:0,
      top:0,
      bottom:0
    },
    tooltip:{
      trigger:'axis',
      axisPointer:{
        type:'shadow'  //阴影效果
      }
    }
  }
}
// 6.获取饼状图数据
const  saleRank= computed(()=>reportDataStore.reportData.saleRank)
// 7.准备饼状图需要用到的数据，方便页面展示
const pieChartData = computed(()=>{
  const data = {
    categoryList:[] as any[],
    goodsList:[] as any[],
    cTotal:0,  //品类的总量
    gTotal:0   //商品的总量
  }
  if(!saleRank.value) return {}
  // 先将saleRank数据解构出来,双层解构
  const {category:{axisX,data1},goods:{axisX:axisX2,data1:data2}} = saleRank.value

  // 收集总的数量
  data.cTotal = data1.reduce((prev,item)=>prev+item,0)
  data.gTotal = data2.reduce((prev,item)=>prev+item,0)

  // 准备品类中的数据
  axisX.forEach((item,index) =>{
    let percent = ((data1[index]/data.cTotal)*100).toFixed(2)+'%'
    data.categoryList.push({
      name:item +'|'+percent,
      value:data1[index],
      percent,
      labelName:item
    })
  })
  // 准备商品中的数据
  axisX2.forEach((item,index)=>{
    let percent = ((data2[index]/data.gTotal)*100).toFixed(2)+'%'
    data.goodsList.push({
      name:item + '|' + percent,
      value:data2[index],
      percent,
      labelName:item
    })
  })
  return data
})
// 8.右侧饼状图配置项数据
const getPieOption = ()=> {
  const {categoryList,goodsList,cTotal,gTotal} = pieChartData.value;
  const list =radio1.value === '品类' ?categoryList :goodsList
  const total = radio1.value === '品类' ? cTotal:gTotal
  return {
    title:[
      {
      text:`${radio1.value}分布`,
      textStyle:{
        fontSize: 14,
        color:'#666'
      },
      left:20,
      top:20,
    },
    {
      text: '累计订单量',
      subtext: total,
      textStyle: {
        fontSize: 14,
        color: '#999'
      },
      subtextStyle: {
        fontSize: 28,
        color: '#333'
      },
      left: '34.5%',
      top: '42.5%',
      textAlign: 'center'
    }
    ],
    tooltip: {
      // 整个图表触发
      trigger: 'item',
      formatter:(params: any) => {
        // data 当前项数据
        // marker 内置提供的圆点标签
        return `${radio1.value}分布<br/>
          ${params.marker + params.data.labelName}<br/>
          ${params.marker}数量:${params.data.value}<br/>
          ${params.marker}占比:${params.data.percent}<br/>
        `;
      }
    },
    legend: {//图例组件。
      // top: '5%',
      // left: 'center'
      // type:"scroll",
      // 图例列表的布局朝向
      orient:'vertical',
      top:'middle',
      left:'70%',
      textStyle:{
        color: '#8c8c8c'
      }
    },
    series: [
      {
        name: `${radio1.value}分布`,
        type: 'pie',
        radius: ['35%', '50%'], // 内外圆的半径
        center:['35%','50%'],  // 中心点坐标
        avoidLabelOverlap: false,  // 是否启用防止标签重叠策略
        itemStyle: {
          borderRadius: 20,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          // show: false,
          // position: 'center',
          // 显示到环的外侧
          position: 'outside',
          // 指定标题的名称
          formatter: function (params: any) {
            return params.data.labelName;
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        // 标签的视觉引导线 就是触须
        labelLine: {
          // show: false,
          length: 7,
          length2: 5
        },
        data:list,
      }
    ]
  }
}

</script>

<style lang="scss" scoped>
.search {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  .search-view{
    cursor: pointer;
    flex: 1;
    h4{
      font-weight: 500;
    }
    &:first-child{
      margin-right:10px;
      .search-wrap{
        display: flex;
        .search-wrap-chart{
          //display: inline-block;
          //width: 50%;
          flex: 1;
          .title{
            font-size: 16px;
            color: #bbbbbb;
            margin-right: 4px;
          }
          .number{
            font-size: 25px;
            margin-left: 8px;
          }
          .line-chart{
            height: 50px;
          }
        }
      }
    }
    &:last-child{
      margin-left: 10px;
      .search-pie{
        .pie-chart{
          height: 400px;
        }
      }
    }
    :deep(.el-card__header){
      padding:0 20px;
      display: flex;
      justify-content: space-between;

  }
  }
}
</style>